<template>
  <div class="app-container">
    <div class="total-layout">
      <div class="layout-title">电视端订单统计</div>
      <el-row :gutter="20">
        <el-col :span="6">
          <div class="total-frame">
            <img :src="img_home_order" class="total-icon"/>
            <div class="total-title">今日订单总数</div>
            <div class="total-value">{{ to }}</div>
          </div>
        </el-col>
        <el-col :span="6">
          <div class="total-frame">
            <img :src="img_home_today_amount" class="total-icon"/>
            <div class="total-title">今日销售总额</div>
            <div class="total-value">￥{{ ta }}</div>
          </div>
        </el-col>
        <el-col :span="6">
          <div class="total-frame">
            <img :src="img_home_yesterday_amount" class="total-icon"/>
            <div class="total-title">昨日销售总额</div>
            <div class="total-value">￥{{ ya }}</div>
          </div>
        </el-col>
        <el-col :span="6">
          <div class="total-frame">
            <img :src="img_home_yesterday_amount" class="total-icon"/>
            <div class="total-title">近7天销售总额</div>
            <div class="total-value">￥{{ wa }}</div>
          </div>
        </el-col>
      </el-row>
    </div>
    <div class="overview-layout">
      <el-row :gutter="20">
        <el-col :span="24">
          <div class="out-border">
            <div class="layout-title">电视端用户统计</div>
            <div style="padding: 40px">
              <el-row class="font-medium">
                <el-col :span="6" class="overview-item-title">今日新增</el-col>
                <el-col :span="6" class="overview-item-title">昨日新增</el-col>
                <el-col :span="6" class="overview-item-title">本月新增</el-col>
                <el-col :span="6" class="overview-item-title">总用户数</el-col>
              </el-row>
              <el-row>
                <el-col :span="6" class="color-danger overview-item-value">{{ toCount }}</el-col>
                <el-col :span="6" class="color-danger overview-item-value">{{ yeCount }}</el-col>
                <el-col :span="6" class="color-danger overview-item-value">{{ moCount }}</el-col>
                <el-col :span="6" class="color-danger overview-item-value">{{ taCount }}</el-col>
              </el-row>
            </div>
          </div>
        </el-col>
      </el-row>
    </div>
    <div class="total-layout">
      <div class="layout-title">手机端订单统计</div>
      <el-row :gutter="20">
        <el-col :span="6">
          <div class="total-frame">
            <img :src="img_home_order" class="total-icon"/>
            <div class="total-title">今日订单总数</div>
            <div class="total-value">{{ to2 }}</div>
          </div>
        </el-col>
        <el-col :span="6">
          <div class="total-frame">
            <img :src="img_home_today_amount" class="total-icon"/>
            <div class="total-title">今日销售总额</div>
            <div class="total-value">￥{{ ta2 }}</div>
          </div>
        </el-col>
        <el-col :span="6">
          <div class="total-frame">
            <img :src="img_home_yesterday_amount" class="total-icon"/>
            <div class="total-title">昨日销售总额</div>
            <div class="total-value">￥{{ ya2 }}</div>
          </div>
        </el-col>
        <el-col :span="6">
          <div class="total-frame">
            <img :src="img_home_yesterday_amount" class="total-icon"/>
            <div class="total-title">近7天销售总额</div>
            <div class="total-value">￥{{ wa2 }}</div>
          </div>
        </el-col>
      </el-row>
    </div>
    <div class="overview-layout">
      <el-row :gutter="20">
        <el-col :span="24">
          <div class="out-border">
            <div class="layout-title">手机端用户统计</div>
            <div style="padding: 40px">
              <el-row class="font-medium">
                <el-col :span="6" class="overview-item-title">今日新增</el-col>
                <el-col :span="6" class="overview-item-title">昨日新增</el-col>
                <el-col :span="6" class="overview-item-title">本月新增</el-col>
                <el-col :span="6" class="overview-item-title">总用户数</el-col>
              </el-row>
              <el-row>
                <el-col :span="6" class="color-danger overview-item-value">{{ toCount2 }}</el-col>
                <el-col :span="6" class="color-danger overview-item-value">{{ yeCount2 }}</el-col>
                <el-col :span="6" class="color-danger overview-item-value">{{ moCount2 }}</el-col>
                <el-col :span="6" class="color-danger overview-item-value">{{ taCount2 }}</el-col>
              </el-row>
            </div>
          </div>
        </el-col>
      </el-row>
    </div>
    <div class="statistics-layout">
      <div class="layout-title">总订单报表</div>
      <el-row>
        <el-col :span="4">
          <div style="padding: 20px">
            <div>
              <div style="color: #909399;font-size: 14px">本月订单总数</div>
              <div style="color: #606266;font-size: 24px;padding: 10px 0">{{ thisMonthOfTotalOrders }}</div>
              <div>
                <span class="color-success" style="font-size: 14px">{{ monthOfTotalOrderPercent }}</span>
                <span style="color: #C0C4CC;font-size: 14px">同比上月</span>
              </div>
            </div>
            <div style="margin-top: 20px;">
              <div style="color: #909399;font-size: 14px">本周订单总数</div>
              <div style="color: #606266;font-size: 24px;padding: 10px 0">{{ thisWeekOfTotalOrders }}</div>
              <div>
                <span class="color-danger" style="font-size: 14px">{{ weekOfTotalOrderPercent }}</span>
                <span style="color: #C0C4CC;font-size: 14px">同比上周</span>
              </div>
            </div>
            <div style="margin-top: 20px;">
              <div style="color: #909399;font-size: 14px">本月销售总额</div>
              <div style="color: #606266;font-size: 24px;padding: 10px 0">{{ thisMonthOfTotalAmount }}</div>
              <div>
                <span class="color-success" style="font-size: 14px">{{ monthOfTotalAmountPercent }}</span>
                <span style="color: #C0C4CC;font-size: 14px">同比上月</span>
              </div>
            </div>
            <div style="margin-top: 20px;">
              <div style="color: #909399;font-size: 14px">本周销售总额</div>
              <div style="color: #606266;font-size: 24px;padding: 10px 0">{{ thisWeekOfTotalAmount }}</div>
              <div>
                <span class="color-danger" style="font-size: 14px">{{ weekOfTotalAmountPercent }}</span>
                <span style="color: #C0C4CC;font-size: 14px">同比上周</span>
              </div>
            </div>
          </div>
        </el-col>
        <el-col :span="20">
          <div style="padding: 10px;border-left:1px solid #DCDFE6">
            <el-date-picker
              style="float: right;z-index: 1"
              size="small"
              v-model="orderCountDate"
              type="daterange"
              align="right"
              unlink-panels
              range-separator="~"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              @change="handleDateChange"
              :picker-options="pickerOptions">
            </el-date-picker>
            <div>
              <ve-line
                :data="chartData"
                :legend-visible="false"
                :loading="loading"
                :data-empty="dataEmpty"
                :settings="chartSettings">
              </ve-line>
            </div>
          </div>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script>
import {fetchUserCount, fetchAmount, fetchReportAmount} from "@/api/order";
import {str2Date} from '@/utils/date';
import img_home_order from '@/assets/images/home_order.png';
import img_home_today_amount from '@/assets/images/home_today_amount.png';
import img_home_yesterday_amount from '@/assets/images/home_yesterday_amount.png';

const DATA_FROM_BACKEND = {
  columns: ['date', 'orderCount', 'orderAmount'],
  rows: [
    {date: '2020-08-03', orderCount: 10, orderAmount: 1093},
    {date: '2020-08-04', orderCount: 20, orderAmount: 2030},
    {date: '2020-08-05', orderCount: 33, orderAmount: 3223},
    {date: '2020-08-06', orderCount: 50, orderAmount: 6023},
    {date: '2020-08-07', orderCount: 80, orderAmount: 8492},
    {date: '2020-08-08', orderCount: 60, orderAmount: 6293},
    {date: '2020-08-09', orderCount: 20, orderAmount: 2093},
    {date: '2020-08-10', orderCount: 60, orderAmount: 6293},
    {date: '2020-08-11', orderCount: 20, orderAmount: 1293},
    {date: '2020-08-12', orderCount: 30, orderAmount: 1093},
    {date: '2020-08-13', orderCount: 25, orderAmount: 2230},
    {date: '2020-08-14', orderCount: 33, orderAmount: 3623},
    {date: '2020-08-15', orderCount: 52, orderAmount: 6423},
    {date: '2020-08-16', orderCount: 84, orderAmount: 8492},
    {date: '2020-08-07', orderCount: 64, orderAmount: 5293},
    {date: '2020-08-18', orderCount: 26, orderAmount: 2293},
    {date: '2020-08-19', orderCount: 66, orderAmount: 6293},
    {date: '2020-08-20', orderCount: 40, orderAmount: 4293},
    {date: '2020-08-21', orderCount: 34, orderAmount: 3293},
    {date: '2020-08-22', orderCount: 22, orderAmount: 2293},
    {date: '2020-08-23', orderCount: 81, orderAmount: 6293},
    {date: '2020-08-24', orderCount: 110, orderAmount: 5593},
    {date: '2020-08-25', orderCount: 120, orderAmount: 2293},
    {date: '2020-08-26', orderCount: 40, orderAmount: 4293},
    {date: '2020-08-27', orderCount: 10, orderAmount: 1193},
    {date: '2020-08-28', orderCount: 20, orderAmount: 2230},
    {date: '2020-08-29', orderCount: 33, orderAmount: 2623},
    {date: '2020-08-30', orderCount: 52, orderAmount: 6023},
    {date: '2020-08-31', orderCount: 83, orderAmount: 7492},
    {date: '2020-09-01', orderCount: 65, orderAmount: 6293},
    {date: '2020-09-02', orderCount: 30, orderAmount: 2293}
  ]
};
export default {
  name: 'home',
  data() {
    return {
      pickerOptions: {
        shortcuts: [
          {
            text: '最近7天',
            onClick(picker) {
              const start = new Date();
              const end = new Date();
              start.setTime(end.getTime() + 3600 * 1000 * 24 * -7);
              picker.$emit('pick', [start, end]);
            }
          },
          {
            text: '最近30天',
            onClick(picker) {
              const start = new Date();
              const end = new Date();
              start.setTime(end.getTime() + 3600 * 1000 * 24 * -30);
              picker.$emit('pick', [start, end]);
            }
          }
        ]
      },
      orderCountDate: '',
      chartSettings: {
        xAxisType: 'time',
        area: true,
        axisSite: {right: ['orderAmount']},
        labelMap: {'orderCount': '订单数量', 'orderAmount': '订单金额'}
      },
      chartData: {
        columns: [],
        rows: []
      },
      loading: false,
      dataEmpty: false,
      img_home_order,
      img_home_today_amount,
      img_home_yesterday_amount,
      to: 0,
      ta: 0.00,
      ya: 0.00,
      wa: 0.00,
      to2: 0,
      ta2: 0.00,
      ya2: 0.00,
      wa2: 0.00,
      yeCount: 0,
      toCount: 0,
      moCount: 0,
      taCount: 0,
      yeCount2: 0,
      toCount2: 0,
      moCount2: 0,
      taCount2: 0,
      thisMonthOfTotalOrders: 0,
      monthOfTotalOrderPercent: "0%",
      thisWeekOfTotalOrders: 0,
      weekOfTotalOrderPercent: "0%",
      thisMonthOfTotalAmount: 0,
      monthOfTotalAmountPercent: "0%",
      thisWeekOfTotalAmount: 0,
      weekOfTotalAmountPercent: "0%"
    }
  },
  created() {
    this.initOrderCountDate();
    this.getData();
  },
  methods: {
    handleDateChange() {
      this.getData();
    },
    initOrderCountDate() {
      const start = new Date();
      const end = new Date();
      start.setTime(end.getTime() + 1000 * 60 * 60 * 24 * -7);
      this.orderCountDate = [start, end];
    },
    getData() {
      setTimeout(() => {
        this.chartData = {
          columns: ['date', 'orderCount', 'orderAmount'],
          rows: []
        };
        for (let i = 0; i < DATA_FROM_BACKEND.rows.length; i++) {
          let item = DATA_FROM_BACKEND.rows[i];
          let currDate = str2Date(item.date);
          let start = this.orderCountDate[0];
          let end = this.orderCountDate[1];
          if (currDate.getTime() >= start.getTime() && currDate.getTime() <= end.getTime()) {
            this.chartData.rows.push(item);
          }
        }
        this.dataEmpty = false;
        this.loading = false
      }, 1000)
      fetchAmount().then(response => {
        this.loading = true
        this.to = response.data.amount.to
        if (response.data.amount.to === 0) {
          this.to = 0
        }
        if (response.data.amount.ta == null) {
          this.ta = 0.00
        } else {
          this.ta = response.data.amount.ta
        }
        if (response.data.amount.ya == null) {
          this.ya = 0.00
        } else {
          this.ya = response.data.amount.ya
        }
        if (response.data.amount.wa == null) {
          this.wa = 0.00
        } else {
          this.wa = response.data.amount.wa
        }
        this.to2 = response.data.amount.to2
        if (response.data.amount.to2 === 0) {
          this.to2 = 0
        }
        if (response.data.amount.ta2 == null) {
          this.ta2 = 0.00
        } else {
          this.ta2 = response.data.amount.ta2
        }
        if (response.data.amount.ya2 == null) {
          this.ya2 = 0.00
        } else {
          this.ya2 = response.data.amount.ya2
        }
        if (response.data.amount.wa2 == null) {
          this.wa2 = 0.00
        } else {
          this.wa2 = response.data.amount.wa2
        }
      })
      fetchUserCount().then(response => {
        this.loading = true
        this.yeCount = response.data.yesterdayIncreasedUserCount
        this.toCount = response.data.todayIncreasedUserCount
        this.moCount = response.data.thisMonthIncreasedUserCount
        this.taCount = response.data.totalUserCount
        this.yeCount2 = response.data.yesterdayIncreasedUserCount2
        this.toCount2 = response.data.todayIncreasedUserCount2
        this.moCount2 = response.data.thisMonthIncreasedUserCount2
        this.taCount2 = response.data.totalUserCount2
      })
      fetchReportAmount().then(response => {
        this.loading = true
        this.thisMonthOfTotalOrders = response.data.result.thisMonthOfTotalOrders
        this.monthOfTotalOrderPercent = response.data.result.monthOfTotalOrderPercent
        this.thisWeekOfTotalOrders = response.data.result.thisWeekOfTotalOrders
        this.weekOfTotalOrderPercent = response.data.result.weekOfTotalOrderPercent
        this.thisMonthOfTotalAmount = response.data.result.thisMonthOfTotalAmount
        this.monthOfTotalAmountPercent = response.data.result.monthOfTotalAmountPercent
        this.thisWeekOfTotalAmount = response.data.result.thisWeekOfTotalAmount
        this.weekOfTotalAmountPercent = response.data.result.weekOfTotalAmountPercent
      })
    }
  }
}
</script>

<style scoped>

.app-container {
  margin-top: 0px;
  margin-left: 120px;
  margin-right: 120px;
}

.total-layout {
  margin-top: 0px;
}

.total-frame {
  border: 1px solid #DCDFE6;
  padding: 20px;
  height: 100px;
}

.total-icon {
  color: #409EFF;
  width: 60px;
  height: 60px;
}

.total-title {
  position: relative;
  font-size: 16px;
  color: #909399;
  left: 70px;
  top: -50px;
}

.total-value {
  position: relative;
  font-size: 18px;
  color: #606266;
  left: 70px;
  top: -40px;
}

.layout-title {
  color: #606266;
  padding: 15px 20px;
  background: #F2F6FC;
  font-weight: bold;
}

.overview-layout {
  margin-top: 20px;
}

.overview-item-value {
  font-size: 24px;
  text-align: center;
}

.overview-item-title {
  margin-top: 10px;
  text-align: center;
}

.out-border {
  border: 1px solid #DCDFE6;
}

.statistics-layout {
  margin-top: 20px;
  border: 1px solid #DCDFE6;
}
</style>
